<template>
	<view @tap="Toggle" class="global-market-show">
		<view :class="'content-box padding-xl shadow-warp bg-white margin-top padding radius text-center shadow-blur ' + bgColorClass">
			<view class="content-top">
				<view>玩家: {{playerName}}</view>
				<view>物品: {{itemName == '' ? '未命名' : itemName}}</view>
			</view>
			<view class="content-mid">
				<view>发布: {{startTime}}</view>
				<view>售价: {{price}} 金币</view>
			</view>
			<view class="content-btm">
				<view>下架: {{endTime}}</view>
				<view>已下架: {{isOutdate ? '是' : '否'}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			playerName: String,
			itemName: String,
			price: String,
			startTime: String,
			endTime: String,
			isOutdate: Boolean,
			bgColorClass: {
				type: String,
				default: 'bg-gradual-pink'
			}
		},
		data() {
			return {
				
			};
		},
		methods: {
			Toggle(e) {
				var anmiaton = e.currentTarget.dataset.class;
				this.animation= anmiaton;
				setTimeout(()=>{
					this.animation= '';
				}, 1000)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.global-market-show {
		.content-box {
			color: #fff;
			font-size: 30rpx;
			.content-top {
				display: flex;
				justify-content: space-around;
				align-items: center;
				view {
					flex: 1;
					text-align: center;
				}
			}
			.content-mid {
				display: flex;
				justify-content: space-around;
				align-items: center;
				view {
					flex: 1;
					text-align: center;
				}
			}
			.content-btm {
				display: flex;
				justify-content: space-around;
				align-items: center;
				view {
					flex: 1;
					text-align: center;
				}
			}
		}
	}
</style>
